import React, { FC,useState} from 'react';
import { Text, View,Button,Image, navigateTo } from '@ray-js/ray';
import styles from './index.module.less';
import FlowerLetterBg1 from '../../assets/images/tab/FlowerLetterBg1.png'
import FlowerLetterBg2 from '../../assets/images/tab/FlowerLetterBg2.png'
import FlowerLetterBall from '../../assets/images/tab/FlowerLetterBall.png'
import FlowerLetterHeart from '../../assets/images/tab/FlowerLetterHeart.png'
import close from '../../assets/images/tab/close.png'



export default function FlowerLetter(props){

    const Close=()=>{
      props.onClose();
    }

    return (
        <>
          <View className={styles.bg}>
            <Image className={styles.container1} src={FlowerLetterBg1}></Image>
            <Image className={styles.FlowerLetterBallImg} src={FlowerLetterBall}></Image>
            <Image className={styles.container2} src={FlowerLetterBg2}></Image>
            <Image className={styles.FlowerLetterHeartImg} src={FlowerLetterHeart}></Image>

            <View className={styles.box}>
              <Text className={styles.DearFont}>亲爱的\u00A0{props.UserName}</Text>
              <Text className={styles.content}>{props.text}</Text>
              <Button className={styles.KnowBtn} onClick={Close}>我知道了</Button>
            </View>

            <Image className={styles.CloseBtn} onClick={Close} src={close}></Image>
          </View>
        </>
      );
}

